<template>
	<view class="container">
		<view class="content" @click="clickView()">
			<!-- <video style="width: 100%;" id="my_video" :controls="false" 
			:show-progress="false"  autoplay @play="playStart"  @ended="end" @pause="pauseSecond" @waiting="waitting" @error="error"
			  :show-center-play-btn="false"  src="https://szxc-1306449830.cos.ap-nanjing.myqcloud.com/doc/img/video2.mp4"></video> -->

			<video style="width: 100%;" id="my_video" :controls="true"
			  :show-progress="true" autoplay  @play="playStart"  @ended="end" @pause="pauseSecond" @waiting="waitting" @error="error"
			    :show-center-play-btn="false" :show-play-btn="false"  :show-fullscreen-btn="false" src="https://szxc-1306449830.cos.ap-nanjing.myqcloud.com/doc/img/robert.mp4"></video>
			<text v-show="flag" class="cell-icon yticon icon-player player_btn"></text>
		</view>
		<view class="bottom_box" :style="{'bottom': _bottom+'rpx;'}">
			<view class="title">
				<view>@{{info.campus_info.name}}</view>
				<view>·{{info.add_time}}</view>
			</view>
			<view class="address">
				<text class="cell-icon yticon icon-address"></text>
				<view style="margin-left: 10rpx;width: 60rpx;">地址</view>
				<view style="width: 2rpx;border: 1px solid #b3b1b1;height: 32rpx;margin: 16rpx"></view>
				<view class="single-line">{{info.campus_info.address}}</view>
			</view>


		</view>
		<!-- <view @click="playVideo()" style="color: white;  margin: auto; border: 1px solid red; text-align: center;  height: 30px; margin: 30px auto;">开始</view> -->
		<!-- <view class="bottom_box">
			<uni-collapse ref="collapse" >
				<uni-collapse-item title="折叠内容1">
					<view class="collspan">
						<text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view> -->
		<!-- <view class="bottom_box">
			<view class="text-container" @click="toggleText">
				<view class="c_title single-show" :style="{ 'white-space': isExpanded ? 'normal' : 'nowrap' }">
					<text>这是一段描述如果长了就隐藏显示,如果能显示完就显示完。折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字</text>
					<text style="cursor: pointer;color:red">#收起</text>
				</view>
				<view>展开</view>
			</view>
			
		</view> -->
		<view class="bottom_box" @click="toggleOpen()" :style="{'bottom': _bottom2+'rpx'}">
			<view class="test" :style="{'display': !open?'':'inline-block'}">{{intro}}</view>
		</view>



	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {

		data() {
			return {
				c_second: 0,
				timer: null,
				flag: false,
				value: ['0'],
				isExpanded: false,
				_bottom: 190,
				info: {},
				_bottom2:20,
				open:false,
				intro:''
			}
		},
		
		onLoad() {
			this.getDetail();
			this.getHeight();
		},
		beforeCreate() {

			clearInterval(this.timer);
			this.timer = null
		},
		beforeDestroy() {

			clearInterval(this.timer);
			this.timer = null
		},

		onShow() {

			clearInterval(this.timer);
			this.timer = null
		},
		onReady() {
			this.videoContext = uni.createVideoContext('my_video')
		},
		onPageScroll(e) {

		},
		methods: {
			getHeight() {
				let sysInfo = uni.getSystemInfoSync();
			
				let h1 = sysInfo.safeArea.bottom;
				let h2 = sysInfo.screenHeight;
				console.log(h1, h2, 555)
				let initH =(h2 - h1) * 2;
				if (h1 != h2) {
					this._bottom = 190 + initH;
					this._bottom2 = initH+20;
					return;
				}
				this._bottom2  =20;
				this._bottom = 190;
			},
			getSafeHeight() {
				let sysInfo = uni.getSystemInfoSync();
				// console.log(sysInfo.platform, sysInfo.safeArea.bottom, sysInfo.windowHeight, sysInfo.screenHeight, 8888888)
			},
			async getDetail() {
				let params = {
					c_id: 1084542670
				}
				let data = await Api.apiCall('get', Api.apiName.course_detail, params, true);
				if (!data || data.code != 0) {
					return;
				}
				this.info = data.data;
				this.intro = data.data.intro;
				
			},
			toggleText() {
				this.isExpanded = !this.isExpanded;
				if (this.isExpanded) {
					this._bottom = 204
				} else {
					this._bottom = 80
				}
			},
			toggleOpen(){
				this.open = !this.open;
				// console.log(this.open,333)
				
				if(this.open){
					this._bottom2=this._bottom2-10;
					this.intro = this.info.long_intro
				}else{
					this._bottom2=this._bottom2+10;
					this.intro = this.info.intro
				}
				
			},
			playVideo() {
				this.c_second = 3
				this.videoContext.seek(3)
				this.videoContext.play();
			},
			playStart() {
				var that = this;
				console.log('begin play')

				that.timer = setInterval(function() {
					that.c_second++;

					console.log('begin当前播放到' + that.c_second)
					// that.$api.msg(`当前播放到：`+that.c_second)
				}, 1000)



			},
			end() {
				clearInterval(this.timer);
				this.timer = null
				this.$api.msg(this.c_second)
				this.c_second = 0;
				this.flag = false;
				console.log('结束');
				this.videoContext.stop();
			},
			pauseSecond() {
				clearInterval(this.timer)
				this.timer = null;
				// this.$api.msg(`暂停播放，当前秒`+this.c_second)
				console.log('暂停播放，当前秒' + this.c_second)
			},
			clickView() {
				this.flag = !this.flag;
				var _msg = this.flag ? '暂停' : '播放'
				console.log('计时器' + this.timer)
				this.$api.msg(_msg)
				if (this.flag) {
					this.videoContext.pause();

					// this.flag = false;
					return;
				}
				if (!this.flag) {
					this.videoContext.play();

					// this.flag = true;
					return;
				}

			},
			error() {
				this.timer = null
				clearInterval(this.timer);
				this.c_second = 0;
				this.$api.msg(`播放出错`)
			},
			waitting() {
				clearInterval(this.timer);
				console.log('加载中...')
				let that = this;
				this.timer = null;
				that.timer = setInterval(function() {
					that.c_second++;

					console.log('当前播放到' + that.c_second)
					// that.$api.msg(`当前播放到：`+that.c_second)
				}, 1000)
			},
		},


	}
</script>

<style lang="scss">
	page {
		background: #0c0c0c;
	}

	.container {
		height: 100vh;
	}

	.content {
		// margin-top: 25%;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}

	.player_btn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.bottom_box {
		position: absolute;
		bottom: 0rpx;
		left: 36rpx;
		right: 36rpx;
		color: #ffffff;
	}

	.title {
		display: flex;
		font-size: 34rpx;
		font-weight: 600;
	}

	.address {
		display: flex;
		height: 30px;
		line-height: 30px;
		background: #363636;
		border-radius: 6rpx;
		margin-top: 20rpx;
		padding: 0rpx 10rpx;
		font-size: 28rpx;
	}

	.collspan {
		// padding: 20rpx;
	}

	.uni-collapse {
		background-color: transparent !important;
	}

	.uni-collapse-item__title.uni-collapse-item-border {
		border-bottom: transparent !important;
	}

	.uni-collapse-item__title-box {
		color: #FFFFFF !important;
		background-color: transparent !important;
		padding: 0 !important;
		height: 60rpx !important;
		line-height: 60rpx !important;
	}

	.uni-collapse-item__wrap {
		background-color: transparent !important;
	}

	.uni-collapse-item__wrap-content {
		color: #FFFFFF !important;
	}

	.uni-collapse-item__wrap-content.open {
		border-bottom: none;
	}

	.c_title {
		font-size: 30rpx;
		padding: 20rpx 0rpx;
	}

	.single-line {
		white-space: nowrap;
		/* 让文字不换行 */
		overflow: hidden;
		/* 隐藏多余部分 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.text-container {
		cursor: pointer;
	}

	.single-show {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.test {
		color: #FFFFFF;
		overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 28rpx;
		height: 160rpx;
	}
	.test2{
		color: #FFFFFF;
		font-size: 28rpx;
	}
</style>